<template>
  <div class="vehicle-detail-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>车辆详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
      </div>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="车辆ID">{{ vehicleInfo.id }}</el-descriptions-item>
        <el-descriptions-item label="车辆名称">{{ vehicleInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="车牌号">{{ vehicleInfo.licensePlate }}</el-descriptions-item>
        <el-descriptions-item label="品牌">{{ vehicleInfo.brandName }}</el-descriptions-item>
        <el-descriptions-item label="车系">{{ vehicleInfo.seriesName }}</el-descriptions-item>
        <el-descriptions-item label="车辆类型">
          <el-tag :type="getTypeTag(vehicleInfo.type)">{{ getTypeName(vehicleInfo.type) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="座位数">{{ vehicleInfo.seats }}</el-descriptions-item>
        <el-descriptions-item label="变速箱类型">
          {{ vehicleInfo.transmissionType === 1 ? '手动' : '自动' }}
        </el-descriptions-item>
        <el-descriptions-item label="排量">{{ vehicleInfo.displacement }}</el-descriptions-item>
        <el-descriptions-item label="燃油类型">
          {{ getFuelTypeName(vehicleInfo.fuelType) }}
        </el-descriptions-item>
        <el-descriptions-item label="日租金">¥ {{ vehicleInfo.dailyRent }}</el-descriptions-item>
        <el-descriptions-item label="车辆状态">
          <el-tag :type="getStatusTag(vehicleInfo.status)">{{ getStatusName(vehicleInfo.status) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="车辆颜色">{{ vehicleInfo.color }}</el-descriptions-item>
        <el-descriptions-item label="出厂年份">{{ vehicleInfo.productionYear }}</el-descriptions-item>
        <el-descriptions-item label="里程数">{{ vehicleInfo.mileage }} km</el-descriptions-item>
        <el-descriptions-item label="所属门店">{{ vehicleInfo.storeName }}</el-descriptions-item>
        <el-descriptions-item label="是否新车">
          <el-tag type="success" v-if="vehicleInfo.isNew === 1">是</el-tag>
          <el-tag type="info" v-else>否</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ vehicleInfo.createTime }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ vehicleInfo.updateTime }}</el-descriptions-item>
      </el-descriptions>
      
      <div class="vehicle-image" v-if="vehicleInfo.image">
        <h4>车辆图片</h4>
        <el-image 
          style="width: 300px; height: 200px" 
          :src="vehicleInfo.image" 
          :preview-src-list="[vehicleInfo.image]">
        </el-image>
      </div>
      
      <div class="vehicle-description" v-if="vehicleInfo.description">
        <h4>车辆描述</h4>
        <p>{{ vehicleInfo.description }}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'VehicleDetail',
  data() {
    return {
      vehicleInfo: {},
      vehicleId: this.$route.params.id,
      typeOptions: [
        { value: 1, label: '经济型' },
        { value: 2, label: '舒适型' },
        { value: 3, label: '豪华型' },
        { value: 4, label: 'SUV' },
        { value: 5, label: 'MPV' }
      ],
      statusOptions: [
        { value: 1, label: '可用' },
        { value: 2, label: '已租' },
        { value: 3, label: '维修中' },
        { value: 4, label: '报废' }
      ]
    }
  },
  created() {
    this.fetchVehicleDetail()
  },
  methods: {
    // 获取车辆详情
    fetchVehicleDetail() {
      request({
        url: `/car-vehicle/vehicles/${this.vehicleId}`,
        method: 'get'
      }).then(res => {
        this.vehicleInfo = res.data
      })
    },
    // 返回车辆列表
    goBack() {
      this.$router.push('/vehicles')
    },
    // 获取车辆类型名称
    getTypeName(type) {
      const found = this.typeOptions.find(item => item.value === type)
      return found ? found.label : '未知'
    },
    // 获取车辆类型标签样式
    getTypeTag(type) {
      const map = {
        1: 'info',
        2: 'success',
        3: 'warning',
        4: 'primary',
        5: 'danger'
      }
      return map[type] || 'info'
    },
    // 获取车辆状态名称
    getStatusName(status) {
      const found = this.statusOptions.find(item => item.value === status)
      return found ? found.label : '未知'
    },
    // 获取车辆状态标签样式
    getStatusTag(status) {
      const map = {
        1: 'success',
        2: 'info',
        3: 'warning',
        4: 'danger'
      }
      return map[status] || 'info'
    },
    // 获取燃油类型名称
    getFuelTypeName(fuelType) {
      const map = {
        1: '汽油',
        2: '柴油',
        3: '电动',
        4: '混合动力'
      }
      return map[fuelType] || '未知'
    }
  }
}
</script>

<style lang="scss" scoped>
.vehicle-detail-container {
  padding: 20px;
  
  .vehicle-image {
    margin-top: 20px;
  }
  
  .vehicle-description {
    margin-top: 20px;
    
    p {
      line-height: 1.6;
      color: #606266;
    }
  }
}
</style> 